<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性：  【微调，文字或者图片】*/
			img{
				border:1px solid red;
				/*margin : 1个属性值 顺时针：上右下左*/
				margin:200px;
				/*margin : 2个属性值 顺时针：上下  右左*/
				margin:10px 200px;
				/*常用:盒子自适应剧中---失效
				行内快  可以设置宽高，不在一行显示
				  margin使用问题1：自适应剧中，必须设置宽度
				  */
				 width: 100%;
				margin:0 auto;
				/*margin : 3个属性值 顺时针：上 右左 下*/
				mar gin:100px 200px 300px;
				/*margin : 4个属性值 顺时针：上 右 下 左*/
				mar gin:100px 200px 300px 400px;
				/*常用：盒子自适应剧中*/
				h1{
					width: 100%;
					margin:0 auto;
				}
			    /*:常用：盒子自适应剧中*/
				span{
					/* 行元素  不可以设置宽高，在一行显示，无法剧中，设置文本
					  text-align: center;
					  */
					width: 100%;
					border: 1px solid red;
					text-align: center;
				margin:0 auto;
				}
				div{
					/* 行内快  可以设置宽高，不在一行显示 */
					width: 200px;
					height: 200px;
					background: red;
					margin: 0 auto;
				}
		}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 四个部分组成
		      外边距    边框以外四周，叫外边距
			  margain 属性
			  边框     --
			  内边距    边框以内 与内容 之间距离 叫内边距
			  内容：    块、行、行内元素本身宽高
			  所有元素存在于框模型中 -->
			  
		<h1>块级元素</h1>
		<!-- 	框模型、盒子模型、四个部分组成，所有元素存在于框模型中  -->
		<img src="img/圣诞.png" width="300px" height="300px" alt="圣诞">
		<span>行内元素</span>
	</body>
</html>